<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <script>

        // 1.  创建表格
        var table = document.createElement('table');
        table.border = '1px';
        // 1.2 创建行
        var tr = document.createElement('tr');
        // 1.3 单元格
        var td = document.createElement('td');
        td.innerHTML = '这是表格';
        tr.appendChild(td);
        table.appendChild(tr);
        document.body.appendChild(table);



        // 工厂方法
        // var cTag = function (tag) {
        function cTag(tag) {
            return document.createElement(tag);
        }
        var table2 = cTag('table');
        table2.border = '1px';
        var tr2 = cTag('tr');
        var td2 = cTag('td');
        td2.innerHTML = '这是表格二';
        tr2.appendChild(td2);
        table2.appendChild(tr2);
        document.body.appendChild(table2);


        // 自定义 构造函数
        function CreatTag(tag) {
            // 创建 DOM
            // 创建元素对象， 这个元素对象 为 自定义构造函数的属性
            this.DOM = document.createElement(tag);

            // 对象方法
            this.border = function (bor) {
                this.DOM.border = bor;
            };
            // 添加子节点的方法
            this.addChild = function (child) {
                this.DOM.appendChild(child);
            },
            this.text = function (text) {
                this.DOM.innerText = text;
            }

            // 设置样式
            this.styles = function (sty) {
                for(var k in sty) {
                    this.DOM.style[k] = sty[k];
                }
            }

        }
        // 创建对象
        var table3 = new CreatTag('table');
        table3.border('1px');

        var tr3 = new CreatTag('tr');

        var td3 = new CreatTag('td');
        td3.text('这是表格三');

        // 添加子元素
        tr3.addChild(td3.DOM);
        table3.addChild(tr3.DOM);

        document.body.appendChild(table3.DOM);

    


    // 通过 CreatTag 创建 div 给div 设置 内容为 '这是一个div'
    var div = new CreatTag('div');
    div.text('这是一个div');
    div.styles({
        width: '100px',
        height: '200px',
        backgroundColor: 'skyblue'
    })
    document.body.appendChild(div.DOM);


// 创建的 对象 实现 p标签的创建和设置过程
    var p = new CreatTag('p');
    p.text('这是段落内容');
    p.styles({
        width: '300px',
        height: '100px',
        backgroundColor: 'pink'
    });

    document.body.appendChild(p.DOM);

    // var p1 = document.createElement('p');
    // p1.innerText = '这是段落内容';
    // p1.style.width = 300;
    // p1.style.height = 300;
    // p1.style.backgroundColor = 'pink';


    </script>
    
</body>
</html>